@use "sass:color";

button {
	border: none;
}

.wp-block-activitypub-followers {
	margin: 16px 0;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;

	// Block title.
	.wp-block-heading {
		margin: 0 0 16px;
		padding: 0 0 8px;
		border-bottom: 1px solid;
	}

	.wp-block-heading,
	.followers-pagination {
		border-color: var(--wp--preset--color--foreground,
			var(--wp--preset--color--primary,
				#e0e0e0
			)
		);
	}

	.followers-container {
		position: relative;

		.followers-list {
			margin: 0;
			padding: 0;
			list-style: none;
		}

		.follower-item {
			margin: 0 0 8px;

			&:last-child {
				margin-bottom: 0;
			}
		}

		.follower-link {
			display: flex;
			align-items: center;
			padding: 8px;
			border: none; // Twenty Fifteen.
			border-radius: 8px;
			box-shadow: none; // Twenty Sixteen.
			transition: background-color 0.2s ease;

			&:hover, &:focus {
				background-color: var(--wp--preset--color--subtle-background,
					var(--wp--preset--color--accent-2,
						var(--wp--preset--color--tertiary,
							var(--wp--preset--color--secondary,
								#f0f0f0
							)
						)
					)
				);
				box-shadow: none; // Twenty Seventeen.
				outline: none;

				.external-link-icon {
					opacity: 1;
				}
			}
		}

		.follower-avatar {
			width: 48px;
			height: 48px;
			border-radius: 50%;
			object-fit: cover;
			margin-right: 16px;
			border: 1px solid #e0e0e0;
		}

		.follower-info {
			flex: 1;
			display: flex;
			flex-direction: column;
			overflow: hidden;
			line-height: 1.3;
		}

		.follower-name {
			font-weight: 600;
			margin-bottom: 2px;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		.follower-username {
			color: var(--wp--preset--color--very-dark-gray, #666);
			font-size: 90%;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		.external-link-icon {
			width: 16px;
			height: 16px;
			margin-left: 8px;
			transition: opacity 0.2s ease;
		}

		.followers-pagination {
			display: grid;
			grid-template-columns: 1fr auto 1fr;
			align-items: center;
			margin-top: 16px;
			padding-top: 8px !important; // Twenty Eleven.
			border-top-style: solid;
			border-top-width: 1px;

			.pagination-info {
				color: var(--wp--preset--color--very-dark-gray, #666);
				font-size: 90%;
				justify-self: center;
			}

			.pagination-previous,
			.pagination-next {
				border: none; // Twenty Fifteen.
				box-shadow: none; // Twenty Sixteen.
				cursor: pointer;
				font-size: 90%;
				display: inline-block;
				padding: 8px 0;
				min-width: 60px;

				&[hidden] {
					display: none !important;
				}

				&[aria-disabled="true"] {
					opacity: 0.3;
					cursor: not-allowed;
					pointer-events: none;
					text-decoration: none;
				}
			}

			.pagination-previous {
				justify-self: start;
				padding-right: 8px;

				&::before {
					content: "←";
				}
			}

			.pagination-next {
				justify-self: end;
				padding-left: 8px;
				text-align: right;

				&::after {
					content: "→";
				}
			}

			@media (max-width: 480px) {
				grid-template-columns: 1fr 1fr;

				.pagination-info {
					display: none;
				}

				.pagination-previous,
				.pagination-next {
					min-height: 44px;
					font-size: 100%;
					align-items: center;
				}
			}
		}

		// Loading spinner
		.followers-loading {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background-color: rgba(255, 255, 255, 0.5);
			border-radius: 8px;
			display: flex;
			align-items: center;
			justify-content: center;

			&[aria-hidden="true"] {
				display: none;
			}
		}

		.loading-spinner {
			width: 40px;
			height: 40px;
			border: 3px solid color-mix(in srgb, var(--wp--preset--color--primary, #0073aa) 30%, transparent);
			border-radius: 50%;
			border-top-color: var(--wp--preset--color--primary, #0073aa);
			animation: spin 1s ease-in-out infinite;
		}

		@keyframes spin {
			to {
				transform: rotate(360deg);
			}
		}
	}
}

// Card style variation
.wp-block-activitypub-followers.is-style-card:not(.block-editor-block-list__block) {
	background-color: var(--wp--preset--color--white, #fff);
	border-radius: 8px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	box-sizing: border-box;
	padding: 24px;

	@media (max-width: 480px) {
		margin-left: -12px;
		margin-right: -12px;
	}

	.wp-block-heading {
		text-align: center;
		border-bottom: none;
		margin-bottom: 16px;
	}

	.follower-link {
		border: 1px solid #e0e0e0;
		margin-bottom: 8px;

		&:hover, &:focus {
			border-color: color.adjust(#e0e0e0, $lightness: -10%);
		}
	}

	.followers-pagination {
		border: none;
		padding-bottom: 0 !important; // Twenty Eleven.
	}
}

// Compact style variation
.wp-block-activitypub-followers.is-style-compact {
	.follower-link {
		padding: 4px;
	}

	.follower-avatar {
		width: 36px;
		height: 36px;
		margin-right: 8px;
	}

	.follower-name {
		font-size: 90%;
	}

	.follower-username {
		font-size: 80%;
	}

	.followers-pagination {
		margin-top: 8px;
		padding-top: 4px;

		.pagination-previous,
		.pagination-next {
			padding-top: 4px;
			padding-bottom: 4px;
			font-size: 80%;

			@media (max-width: 480px) {
				font-size: 100%;
			}
		}

		.pagination-info {
			font-size: 80%;
		}
	}
}
